<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>【每日一练】164—CSS实现一款银行卡UI设计</title>
  <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Josefin Sans', sans-serif;
  }

  .container {
    min-height: 100vh;
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    width: 500px;
    height: 300px;
    color: #fff;
    cursor: pointer;
    perspective: 1000px;
  }

  .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
  }

  .front,
  .back {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #0045c7, #ff2c7d);
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 30px;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
    backface-visibility: hidden;
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .map-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: -1;
  }

  .card-no {
    font-size: 35px;
    margin-top: 60px;
  }

  .card-holder {
    font-size: 12px;
    margin-top: 40px;
  }

  .name {
    font-size: 22px;
    margin-top: 20px;
  }

  .bar {
    background: #222;
    margin-left: -30px;
    margin-right: -30px;
    height: 60px;
    margin-top: 10px;
  }

  .card-cvv {
    margin-top: 20px;
  }

  .card-cvv div {
    flex: 1;
  }

  .card-cvv img {
    width: 100%;
    display: block;
    line-height: 0;
  }

  .card-cvv p {
    background: #fff;
    color: #000;
    font-size: 22px;
    padding: 10px 20px;
  }

  .card-text {
    margin-top: 30px;
    font-size: 14px;
  }

  .signature {
    margin-top: 30px;
  }

  .back {
    transform: rotateY(180deg);
  }
</style>

<body>
  <div class="container">
    <div class="card">
      <div class="card-inner">
        <div class="front">
          <img src="images/map.png" class="map-img">
          <div class="row">
            <img src="images/chip.png" width="60px">
            <img src="images/visa.png" width="60px">
          </div>
          <div class="row card-no">
            <p>1230</p>
            <p>4567</p>
            <p>8901</p>
            <p>2345</p>
          </div>
          <div class="row card-holder">
            <p>姓名</p>
            <p>有效期</p>
          </div>
          <div class="row name">
            <p>Web前端开发</p>
            <p>12/50</p>
          </div>
        </div>
        <div class="back">
          <img src="images/map.png" class="map-img">
          <div class="bar"></div>
          <div class="row card-cvv">
            <div>
              <img src="images/pattern.png">
            </div>
            <p>345</p>
          </div>
          <div class="row card-text">
            <p>这是一个使用 HTML 和 CSS 的实现虚拟银行卡片，你也可以设计这样的卡片。</p>
          </div>
          <div class="row signature">
            <p>www.webqdkf.com</p>
            <img src="images/visa01.png" width="80px">
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>